<template>
  <div>
    <el-drawer v-model="visible" :direction="direction" size="700px" title="流程设置" :close-on-click-modal="false">
      <template #default>
        <div>
          <el-form :model="form" label-width="auto">
            <el-card shadow="never">
              <span> 注：根据模板能够更快配置数据源，如需使用自定义，可使用更高级的可视化配置。 </span>
            </el-card>
            <el-divider content-position="left">流程信息</el-divider>
            <el-card shadow="never">
              <el-form-item label="名称" required>
                <el-input v-model="form.name" />
              </el-form-item>
              <el-form-item label="Cron表达式">
                <el-input v-model="form.name" />
              </el-form-item>
              <el-form-item label="源模板" required>
                <el-select v-model="form.region" placeholder="请选择源类型">
                  <el-option label="公众号" value="shanghai" />
                  <el-option label="新浪微博" value="beijing" />
                </el-select>
              </el-form-item>
              <el-form-item label="状态" required>
                <el-switch v-model="form.delivery" />
              </el-form-item>
              <el-form-item label="参数">
                <el-input v-model="form.desc" type="textarea" />
              </el-form-item>
              <el-form-item label="其他配置">
                <el-button type="primary" text> 高级设置 </el-button>
                <div>注: 使用高级设置会更改模版参数,将不再使用快捷设置.</div>
              </el-form-item>
            </el-card>
            <el-divider content-position="left">通知</el-divider>
            <el-card shadow="never">
              <el-form-item label="收件人">
                <el-input v-model="form.desc" type="textarea" />
              </el-form-item>
              <el-form-item label="通知方式">
                <el-checkbox-group v-model="form.type">
                  <el-checkbox value="Online activities" name="type"> 邮件 </el-checkbox>
                  <el-checkbox value="Promotion activities" name="type"> API </el-checkbox>
                  <el-checkbox value="Offline activities" name="type"> MQ </el-checkbox>
                  <el-checkbox value="Simple brand exposure" name="type"> 短信 </el-checkbox>
                </el-checkbox-group>
              </el-form-item>
              <el-form-item label="通知类型">
                <el-checkbox-group v-model="form.type">
                  <el-checkbox value="Online activities" name="type"> 执行开始 </el-checkbox>
                  <el-checkbox value="Promotion activities" name="type"> 执行结束 </el-checkbox>
                  <el-checkbox value="Offline activities" name="type"> 执行异常 </el-checkbox>
                </el-checkbox-group>
              </el-form-item>
            </el-card>
          </el-form>
        </div>
      </template>
      <template #footer>
        <div style="flex: auto">
          <el-button>取消</el-button>
          <el-button type="primary">提交</el-button>
        </div>
      </template>
    </el-drawer>
  </div>
</template>

<script setup lang="ts">
import type { DrawerProps } from "element-plus";
import { reactive, ref } from "vue";
const visible = ref(false);
const direction = ref<DrawerProps["direction"]>("rtl");
const init = () => {
  visible.value = true;
};
// do not use same name with ref
const form = reactive({
  name: "",
  region: "",
  date1: "",
  date2: "",
  delivery: false,
  type: [],
  resource: "",
  desc: ""
});

const onSubmit = () => {
  console.log("submit!");
};
defineExpose({
  init
});
</script>

<style scoped></style>
